<script setup lang="ts">
import {ref,nextTick} from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'
const dialogVisible = ref(false)

const toolbarRef =ref(null)
const editorRef = ref(null)
const editor = ref()
//创建编辑器
const showHandle = async ()=>{
  dialogVisible.value = true
  //确保DOM已经重新加载，可以获取到selector
  await nextTick();
  console.log(editorRef.value,toolbarRef.value)
  // 创建编辑器
  editor.value = createEditor({
    selector: editorRef.value!,
    mode: 'default' // 或 'simple' 参考下文
  })
  // 创建工具栏
  const toolbar = createToolbar({
    editor:editor.value,
    selector: toolbarRef.value!,
    mode: 'default' // 或 'simple' 参考下文
  })

}

// 销毁编辑器
const destroy = ()=>{
  if(editor.value){
    editor.value.destroy()
    editor.value = null;
  }
  dialogVisible.value = false;
}
</script>

<template>
  <div>
    <p>
      在dialog中编辑器演示：
      <el-button type="primary" @click="showHandle">加载编辑器</el-button>
    </p>

    <el-dialog v-model="dialogVisible" title="Tips" width="80%" destroy-on-close>
      <span>编辑</span>
      <div>
        <div ref="toolbarRef" style="border-bottom:1px solid #ccc;"></div>
        <div ref="editorRef" style="height: 500px;"></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="destroy">编辑完成</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
